<template>
  <basic-container>
    <el-row>
      <el-col span="5" style="min-width:150px">
        <div class="text" style="width: 30%">素材名称:</div>
        <el-input
          id="id-offer-creativeconfirm-submitForm"
          placeholder="请输入素材名称"
          v-model="form.creativeName"
          clearable
          size="mini"
          style="width: 60%" @keyup.enter.native = "submitForm">
        </el-input>
      </el-col>
      <el-col span="5" style="min-width:150px">
        <div class="text" style="width: 30%">需求名称:</div>
        <el-input
          id="id-offer-creativeconfirm-submitForm-two"
          placeholder="请输入需求名称"
          v-model="form.requestName"
          clearable
          size="mini"
          style="width: 60%" @keyup.enter.native = "submitForm">
        </el-input>
      </el-col>
      <el-col span="5" style="min-width:150px">
        <div class="text" style="width: 30%">设计者:</div>
        <el-select id="id-offer-creativeconfirm-isShowSelectOptions" v-model="form.designer" clearable filterable size="mini" placeholder="请选择设计者" style="width: 60%"
                   ref="auditAuditStatus" @visible-change="isShowSelectOptions" @change="submitForm">
          <el-option
            v-for="(item, index) in designerList"
            :key="index"
            :label="item.realName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col span="5" style="min-width:150px">
        <div class="text" style="width: 30%">媒体:</div>
        <el-select id="id-offer-creativeconfirm-isShowSelectOptions-two" v-model="form.platform" clearable size="mini" placeholder="请选择媒体" style="width: 60%"
                   ref="auditAuditStatus" @visible-change="isShowSelectOptions" @change="submitForm">
          <el-option
            v-for="(item, index) in platformsList"
            :key="index"
            :label="item.dictValue"
            :value="item.dictKey">
          </el-option>
        </el-select>
      </el-col>
      <el-col span="4" style="min-width: 160px;display:flex;justify-content:flex-end">
        <el-tooltip class="item" effect="dark" content="展开全部" placement="top">
          <el-button id="id-offer-creativeconfirm-unfoldIcon" :class="upIcon" class="search-circle" @click="unfoldIcon" style="margin-right: 10px"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="清空" placement="top">
          <el-button id="id-offer-creativeconfirm-resetSearch" :class="emptyIcon" class="search-circle" @click="resetSearch"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="搜索" placement="top">
          <el-button id="id-offer-creativeconfirm-submitForm-one" type="primary" icon="el-icon-search" size="small" @click="submitForm" style="margin-right: 0">搜索</el-button>
        </el-tooltip>
      </el-col>
    </el-row>
    <el-row v-show="searchConceal">
      <el-col span="5" style="min-width:150px">
        <div class="text" style="width: 30%">状态:</div>
        <el-select id="id-offer-creativeconfirm-isShowSelectOptions-one" v-model="form.status" clearable size="mini" placeholder="请选择状态台" style="width: 60%"
                   ref="requestPlatform" @visible-change="isShowSelectOptions" @change="submitForm">
          <el-option
            v-for="(item, index) in statusList"
            :key="index"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col span="8" style="min-width:150px">
        <div class="text" style="width: 20%">更新时间:</div>
        <el-date-picker id="id-offer-creativeconfirm-isShowSelectOptions-submitForm"
                        v-model="form.time" size="mini" type="daterange" range-separator="至" start-placeholder="开始日期"
                        clearable value-format="yyyy-MM-dd" end-placeholder="结束日期" ref="confirmTime"
                        @visible-change="isShowSelectOptions" @change="submitForm" style="width: 70%">
        </el-date-picker>
      </el-col>
    </el-row>
    <el-button
      id="id-offer-creativeconfirm-isShowSelectOptions-confirm"
      type="success"
      size="small"
      icon="el-icon-circle-check"
      plain
      @click="confirm" style="float: left">效果确认
    </el-button>
    <div v-if="data.length === 0 && loading === false">
      <div style="display: flex;margin: 0 auto;width: 150px;justify-content: space-between">
        <div style="width: 41px">
          <img style="width: 100%;height: 100%" src="/img/icon/noData.png" alt="">
        </div>
        <div style="line-height: 41px;color: #bfbfbf;font-size: 20px">
          暂无数据
        </div>
      </div>
    </div>
    <div style="margin: 10px;display: flex;flex-wrap: wrap;float: left; width: 100%; min-height: 50px;"   v-loading="loading"
         element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <div v-for="item in data" :key="item.id" style="border: 1px solid #ddd; padding: 10px;margin-right: 1%;margin-top: 10px;">
        <div style="position: relative;" >
          <el-checkbox-group v-if="item.performConfirmed != 1 && (item.hasSelectPem || roles.admin)"  v-model="checked">
            <el-checkbox
              style="position: absolute; left: 10px; top: 10px"
              :key="item.id"
              :label="item.id"
            >&nbsp;
            </el-checkbox>
          </el-checkbox-group>
          <div style="width: 59px;position: absolute;left: 39%;top:30%" @click="creativeDetail(item)">
            <img style="width: 100%;height: 100%" v-if="item.type === 1" src="/img/icon/video-icon.png" alt="">
          </div>
          <div class="card-image" @click="creativeDetail(item)" >
            <img v-if="item.creativeUrl === '-2'" src="#" alt="上传失败" />
            <img v-else-if="item.type === 0"  fit="fill"   class="detailImg" :src="item.creativeUrl" alt="" />
            <img v-else class="detailImg" :src="item.thumbnailUrl" alt="" />
          </div>
          <div class="card-text">
            <span>{{ item.name }}</span>
            <span style="margin-top: 10px">
              {{ item.createTime }}
              <i class="el-icon-time" />{{ item.count }} <i class="el-icon-link" />{{ item.associatedAd }}
            </span>
            <span style="text-align: center;margin-top:20px">
              <el-tag v-if="item.performConfirmed === 1" type="success">已确认</el-tag>
              <el-tag v-else type="warning">未确认</el-tag>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div style="text-align: center">
      <el-button
        id="id-offer-creativeconfirm-getMore-one"
        v-if="data.length < this.page.total"
        type="text"
        @click="getMore"
        >查看更多</el-button
      >
    </div>
    <el-dialog
      :visible.sync="creativeDetailDialog" :modal-append-to-body="false" :close-on-click-modal="false"
      :before-close="handleClose" :append-to-body="true" width="60%">
      <div style="display: flex">
        <!--素材-->
        <div class="detailCreative">
          <img v-if="detailData.waterUrl === '-2'" src="#" alt="上传失败" />
          <img v-else-if="detailData.type === '图片'" :src="detailData.waterUrl" alt="" class="detailImg"/>
          <video   v-show="detailData.type === '视频'" ref="video" controls="controls"
                  :src="detailData.waterUrl" class="detailImg"></video>
        </div>
        <!--内容-->
        <div style="width: 49%;padding:3px;margin-left:2%;border:2px solid #f0f2f5;border-radius: 7px">
          <div class="detailUp">
            <div>短id : {{ detailData.shortId }}</div>
            <div>素材名称 : {{ detailData.name }}</div>
            <div>类型 : {{ detailData.type }}</div>
            <div>媒体 : {{ detailData.platform }}</div>
            <div>素材尺寸 : {{ detailData.screenSize }}</div>
            <div>设计者 : {{ detailData.designer }}</div>
            <div>版本 : {{ detailData.version }}</div>
            <div>标签 : {{ detailData.tags }}</div>
            <div>首次使用时间 : {{ detailData.firstUseTime }}</div>
            <div>状态 : {{ detailData.status }}</div>
            <div>投放天数 : {{ detailData.count }}</div>
            <div>关联广告 : {{ detailData.associatedAd }}</div>
          </div>
          <div class="detailDown">
            <div>曝光 : {{ detailData.impressions }}</div>
            <div>安装 : {{ detailData.install }}</div>
            <div>成本 : {{ detailData.spend }}</div>
            <div>点击 : {{ detailData.clicks }}</div>
            <div>CTR : {{ detailData.ctr }}</div>
            <div>CPA : {{ detailData.cpa }}</div>
            <div>CVR : {{ detailData.cvr }}</div>
            <div>CPM : {{ detailData.cpm }}</div>
          </div>
          <div style="margin-top: 20px">
            <div style="width: 115px; margin: 0 auto">
              <el-button type="primary" size="mini" @click="checkEffect(detailData.id,detailData.type)">查看效果报告</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";
import { confirm, getList, getDetail } from "@/api/offer/creativeconfirm";
import { getSysDictList } from "@/api/system/dict";
import { getDesigner } from "@/api/offer/creative";
import { createEventHandler } from "@/util/events";
import store from "@/store/";

const stateList = [
  { label: "等待提交", value: 0 },
  { label: "等待审核", value: 1 },
  { label: "审核通过", value: 2 },
  { label: "审核拒绝", value: 3 },
  { label: "禁用", value: 4 },
];

export default {
  data() {
    return {
      upIcon: 'el-icon-arrow-down',
      searchIcon: 'el-icon-search',
      emptyIcon: 'el-icon-delete',
      searchConceal: false,
      creativeDetailDialog: false,
      platformsList: [],
      designerList: [],
      statusList: [
        { label: "未确认", value: "0" },
        { label: "已确认", value: "1" },
      ],
      time: "",
      form: {
        creativeName: "",
        designer: "",
        time: [],
        platform: "",
        requestName:'',
        status: "",
      },
      query: {
        offerId: null,
      },
      loading: true,
      page: {
        pageSize: 8,
        currentPage: 1,
        total: 0,
      },
      detailData: {},
      data: [],
      checked: [],
    };
  },
  computed: {
    ...mapGetters(["permission", "roles"]),
    permissionList() {
      return {};
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  beforeRouteLeave(to, form, next) {
    let self = this;
    if(self.eventHandler) {
      self.eventHandler.clear();
    }
    next();
  },
  created() {
    //window.addEventListener('keyup', this.submitForm) //监听键盘事件
    let self = this;
    this.eventHandler = createEventHandler("offerCenter")
      .addListener((event) => {
      if(event.message == 'offerChanged' && event.offerId && event.offerId !== "" ) {
        self.query.offerId = event.offerId;
        self.data = []
        self.page.currentPage = 1
        self.page.total = 0
        self.getList();
      }
    });
    this.query.offerId = store.state.user.offer;
    //获取设计师列表
    getDesigner().then((res) => {
      this.designerList = res.data.data;
    });
    //获取媒体列表
    getSysDictList("platforms").then((map) => {
      this.platformsList = map['platforms']
    });
    this.getList();
  },

  methods: {
    unfoldIcon(){
      if (this.upIcon === 'el-icon-arrow-down'){
        this.upIcon = 'el-icon-arrow-up'
        this.searchConceal = true
      }else {
        this.upIcon = 'el-icon-arrow-down'
        this.searchConceal = false
      }
    },
    isShowSelectOptions(isShowSelectOptions){
      if(!isShowSelectOptions) this.$refs.confirmDesigner.blur();
      if(!isShowSelectOptions) this.$refs.confirmPlatform.blur();
      if(!isShowSelectOptions) this.$refs.confirmStatus.blur();
      if(!isShowSelectOptions) this.$refs.confirmTime.blur();
    },
    //搜索
    submitForm() {
      this.form.time = this.form.time === null ? [] : this.form.time;
      this.page.currentPage = 1
      let data = {
        creativeName: this.form.creativeName === "" ? null : this.form.creativeName,
        designer: this.form.designer === "" ? null : this.form.designer,
        startTime: this.form.time.length > 0 ? this.form.time[0] : null,
        endTime: this.form.time.length > 0 ? this.form.time[1] : null,
        platform: this.form.platform === "" ? null : this.form.platform,
        status: this.form.status === "" ? null : this.form.status,
        requestName : this.form.requestName === "" ? null:this.form.requestName
      };
      this.getList(data);
    },
    resetSearch(){
      this.form = {
        creativeName: "",
        designer: "",
        time: [],
        platform: "",
        status: "",
      }
      let data = {
        creativeName:null,
        designer:null ,
        startTime:  null,
        endTime:  null,
        platform: null,
        status:null ,
      };
      this.getList(data);
    },
    getList(params = {}) {
      this.loading = true;
      getList(
        this.page.currentPage,
        this.page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        if(this.page.currentPage > 1){
          data.records.map(item =>{
            this.data.push(item)
          })
        }else{
          this.data = data.records;
        }
        this.loading = false;
      }).catch(error =>{
        if(error){
          this.loading = false
        }
      });
    },
    confirm() {
      if (this.checked.length <= 0) {
        this.$message.warning("请至少选择一条数据");
      } else {
        this.$confirm("确定要确认这些数据吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          confirm(this.checked).then(() => {
            this.$message.success("操作成功");
            this.checked = []
            this.getList(this.page, this.query);
          });
        });
      }
    },
    //查看详情
    creativeDetail(row) {
      getDetail(row.id).then((res) => {
        this.detailData = res.data;
        this.detailData.type = this.detailData.type === 0 ? "图片" : "视频";
        this.detailData.designer = this.detailData.designer.split(',')
        let list = []
        this.designerList.map(item =>{
          this.detailData.designer.map(i=>{
            if(item.id === i){
              list.push(item.realName)
            }
          })
        })
        this.detailData.designer = list.join(',')
        stateList.map(item =>{
          if(item.value === this.detailData.status){
            this.detailData.status = item.label
          }
        })
        this.creativeDetailDialog = true;
      });
    },
    //关闭弹窗
    handleClose() {
      this.creativeDetailDialog = false;
      this.$refs.video.pause();
    },

    //获取更多
    getMore() {
      this.loading = true;
      this.form.time = this.form.time === null ? [] : this.form.time;
      let data = {
        creativeName: this.form.creativeName === "" ? null : this.form.creativeName,
        designer: this.form.designer === "" ? null : this.form.designer,
        startTime: this.form.time.length > 0 ? this.form.time[0] : null,
        endTime: this.form.time.length > 0 ? this.form.time[1] : null,
        platform: this.form.platform === "" ? null : this.form.platform,
        status: this.form.status === "" ? null : this.form.status,
        requestName : this.form.requestName === "" ? null:this.form.requestName
      };
      this.page.currentPage += 1;
      this.getList(data)
    },
    //检查效果报告
    checkEffect(id,type){
      this.$router.push({path:'/creativeReport/creativeperformance',query:{creativeId:id, type:type, beginDate:'', endDate:''}});
    }
  },
};
</script>

<style lang="scss" scoped>
.detailCreative{
  width: 49%;
  border:2px solid #f0f2f5;
  border-radius: 7px;
  background-color: #f0f2f5;
  height:400px;
  line-height:400px
}
.detailImg{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  vertical-align: middle;
}

//.card {
//  width: 320px;
//  height: 300px;
//  text-align: center;
//  margin: 0 auto;
//  //border: 1px solid black;
//  position: relative;
//}

.card-image {
  width: 80%;
  margin: 0 auto;
  height: 225px;
  line-height: 225px;
  //text-align: center;
}

.card-image img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  margin: 0 auto;
  vertical-align: middle;
}

.card-text {
  margin: 6px 18px;
  text-align: left;
  font-size: 13px;

  span {
    display: block;

    i {
      color: #1296db;
      font-weight: bold;
      margin: 0 8px;
    }
  }
}
.detailUp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  div {
    margin-top: 10px;
    width: 40%;
    // height: 28px;
    // line-height: 28px;
  }
}

.detailDown {
  display: flex;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: space-between;

  div {
    width: 40%;
    border: 2px solid #f0f2f5;
    background-color: #f0f2f5;
    border-radius: 5px;
    height: 28px;
    line-height: 28px;
    margin-bottom: 4px;
  }

}
.search-circle{
  border-radius: 50%;
  border: 1px solid #dcdfe6;
  width: 30px;
  height: 30px;
  padding: 0;
  margin-right: 0;
}
</style>
